<template>
    <div>
      <!-- 搜索区域 -->
      <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="dateSelect"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
            @change="dateChange"
          />
        </el-form-item>
        <el-form-item label="广告类型">
          <el-select v-model="formData.type" clearable placeholder="请选择广告类型" style="width: 200px;">
            <el-option label="开屏" value="KP" />
            <el-option label="原生" value="YS" />
            <el-option label="banner" value="BANNER" />
            <el-option label="优量汇原生" value="ylhYS" />
            <el-option label="激励视频" value="JLSP" />
          </el-select>
        </el-form-item>
        <el-form-item label="曝光状态">
          <el-select v-model="formData.status" clearable placeholder="请选择广告类型" style="width: 200px;">
            <el-option label="成功" value="1" />
            <el-option label="失败" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="广告ID">
          <el-input clearable v-model="formData.adid" />
        </el-form-item>
        <el-form-item label="链接">
          <el-input clearable v-model="formData.linkType" />
        </el-form-item>
        <el-form-item label="包名">
          <el-input clearable  v-model="formData.package" />
        </el-form-item>
        <el-form-item label="oaid">
          <el-input placeholder="" clearable v-model="formData.oaid" />
        </el-form-item>
        <el-form-item label="code码">
          <el-input placeholder="" clearable v-model="formData.code" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="searchHandler">查询</el-button>
        </el-form-item>
      </el-form>
          
      <!-- 表格区域 -->
      <!-- <el-button :icon="Checked" type="primary" plain>曝光总计：{{ showTotal }}</el-button> -->
      <el-table :data="tableData">
        <el-table-column type="index" label="#" width="50"/>
        <el-table-column prop="adid" label="广告ID"  width="100"/>
        <el-table-column prop="status" label="状态"  width="60" align="center"/>
        <el-table-column prop="code" label="code" width="100" align="center">
          <template #header>
            <el-tooltip class="box-item" effect="dark" content="Top Left prompts info" placement="top">
              <template #content>
                1234：原生展示成功<br />
                200：banner展示成功<br />
                666：开屏曝光成功<br />
                1111：未开屏或者开屏失败<br />
                2000：网络请求超时<br />
                804：广告切后台<br />
                1106：广告展示失败<br />
                1104：无合适的广告<br />
                1100：频繁调用相关的 API<br />
                2345：优量汇原生曝光成功<br />
                5000：激励视频未看完<br />
              </template>
              <div class="code_tip">
                <span class="tip_title">code</span>
                <el-icon size="15" color="#999999">
                  <QuestionFilled />
                </el-icon>
              </div>
            </el-tooltip>
          </template>
          <template #default="scope">
            <div class="status_box">
              <span v-if="scope.row.code == '1234' || scope.row.code == '200' || scope.row.code == '666' || scope.row.code == '2345'" class="status_round_success"></span>
              <span v-else class="status_round_fail"></span>
              <span class="status_value">{{  scope.row.code  }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="link_type" label="链接" width="90" align="center"/>
        <el-table-column prop="type" label="广告类型" width="120" align="center">
          <template #default="scope">
            <el-tag type="primary" effect="dark" round v-if="scope.row.type == 'KP'">开屏</el-tag>
            <el-tag type="success" effect="dark" round v-else-if="scope.row.type == 'YS'">原生</el-tag>
            <el-tag type="warning" effect="dark" round  v-else-if="scope.row.type == 'ylhYS'">优量汇原生</el-tag>
            <el-tag type="info" effect="dark" round v-else-if="scope.row.type == 'JLSP'">激励视频</el-tag>
            <el-tag type="danger" effect="dark" round v-else="scope.row.type == 'BANNER'">banner</el-tag>
          </template>
          </el-table-column>
          <el-table-column prop="package" label="包名" width="90" align="center"/>
          <el-table-column prop="oaid" label="oaid" width="400" align="center">
            <template #default="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.oaid" placement="top">
                <span @click="copyOaid(scope.row.oaid)">{{ scope.row.oaid.slice(0, 40) }}...</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="fir_add_time" label="时间" align="center" width="170"/>
        </el-table>
        <br/>
        <!-- 分页器 -->
        <el-pagination
          v-model:currentPage="pageNo"
          v-model:page-size="limit"
          @current-change="getAdShowListFn"
          @size-change="sizeChange"
          :page-sizes="[10, 20, 30]"
          background 
          layout="prev, pager, next, jumper, ->, sizes, total"
          :total="total" />

        <!-- 状态码table -->
        <div style="color: #666; font-weight: bold; font-size: 14px; text-align: center; margin: 20px 0;">广告状态码统计</div>
        <el-table :data="statusCodeGroupData" style="width: 100%">
          <el-table-column prop="code" label="状态码">
            <template #default="scope">
              <span style="color: #333;">{{ scope.row.code }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="统计" />
        </el-table>
    </div>
  </template>

<script setup>
  import { ElMessage } from 'element-plus'
  import { ref, computed, onMounted } from "vue"
  import { getAdShowList, statusCodeGroup } from "@/api/page/list1"

  // 分页器当前页码
  let pageNo = ref(1)
  // 每一页展示多少条数据
  let limit = ref(10)
  // 数据总条数
  let total = ref(0)
  // 分页的下拉菜单发生改变时触发
  const sizeChange = () => {
    pageNo.value = 1
    getAdShowListFn()
  }

  // 计算出当前年月日
  const currentDate = computed(() => {
    // 创建 Date 对象
    const now = new Date()
    // 获取年、月、日（月份需 +1）
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0') // 补零
    const day = String(now.getDate()).padStart(2, '0') // 补零
    // 组合成 YYYY-MM-DD 格式
    const dateString = `${year}-${month}-${day}`
    return dateString
  })

  // 时间范围
  const dateSelect = ref('')
  const dateChange = (val) => {
    dateSelect.value = val
    if (val && Array.isArray(val)) {
      formData.value.dataStart = val[0]
      formData.value.dataEnd = val[1]
    } else {
      formData.value.dataStart = ''
      formData.value.dataEnd = ''
    }
  }

  // 表单数据收集
  const formData = ref({
    page: pageNo.value,
    pages: limit.value,
    dataStart: '',
    dataEnd: '',
    type: '',
    adid: '',
    linkType: '',
    package: '',
    status: '',
    oaid: '',
    code: ''
  })

  // 获取曝光列表
  const tableData = ref([])
  const showTotal = ref(0)
  const getAdShowListFn = async () => {
    let res = await getAdShowList(Object.assign(formData.value, {
      page: pageNo.value, // 页号
      pages: limit.value // 每页数量
    }))
    tableData.value = res.data
    total.value = res.total
    showTotal.value = res.total
    console.log('广告曝光数据', res)
  }

  // 点击搜索按钮
  const searchHandler = () => {
    pageNo.value = 1
    getAdShowListFn()
    getStatusCodeGroup()
  }

  // 复制oaid
  const copyOaid = (oaid) => {
      let input = document.createElement('textarea')
      input.value = oaid
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      document.body.removeChild(input)
      ElMessage({
          message: '复制成功',
          type: 'success',
          plain: true
    })
  }

  // 获取状态码分组
  let statusCodeGroupData = ref([])
  const getStatusCodeGroup = async() => {
    let res = await statusCodeGroup({
      dataStart: formData.value.dataStart,
      dataEnd: formData.value.dataEnd
    })
    if(res.code == 200){
      statusCodeGroupData.value = res.data
    }
    console.log('获取状态码分组', statusCodeGroupData.value)
  }

  // 挂载完毕
  onMounted(() => {
    getAdShowListFn()
    getStatusCodeGroup()
  })
</script>

<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.code_tip{
    display: flex;
    align-items: center;
    justify-content: center;
    .tip_title{
      margin-right: 3px;
    }
  }
  .status_box{
    display: flex;
    align-items: center;
    justify-content: center;
    .status_round_success{
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 10px;
      background-color: #67c23a;
      margin-right: 5px;
    }
    .status_round_fail{
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 10px;
      background-color: #f56c6c;
      margin-right: 5px;
    }
  }
</style>